<template>
  <div class="">
    <Transition @before-enter="onBeforeEnter" @enter="onEnter" @after-enter="onAfterEnter"
      @enter-cancelled="onEnterCancelled" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave"
      @leave-cancelled="onLeaveCancelled">
      ....
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 在元素被插入到 DOM 之前被调用
// 用这个来设置元素的 "enter-from" 状态
function onBeforeEnter(el: any) { }

// 在元素被插入到 DOM 之后的下一帧被调用
// 用这个来开始进入动画
function onEnter(el: any, done: any) {
  // 调用回调函数 done 表示过渡结束
  // 如果与 CSS 结合使用，则这个回调是可选参数
  done()
}

// 当进入过渡完成时调用。
function onAfterEnter(el: any) { }
function onEnterCancelled(el: any) { }

// 在 leave 钩子之前调用
// 大多数时候，你应该只会用到 leave 钩子
function onBeforeLeave(el: any) { }

// 在离开过渡开始时调用
// 用这个来开始离开动画
function onLeave(el: any, done: any) {
  // 调用回调函数 done 表示过渡结束
  // 如果与 CSS 结合使用，则这个回调是可选参数
  done()
}

// 在离开过渡完成、
// 且元素已从 DOM 中移除时调用
function onAfterLeave(el: any) { }

// 仅在 v-show 过渡中可用
function leaveCancelled(el: any) { }
function onLeaveCancelled(el: any) { }
</script>

<style lang="scss" scoped>
</style>
